<!-- 官方商品 -->
 <template>
    <div class="official">
        <div class="section-header">
            <h2 class="section-title">官方商区</h2>
            <p class="section-subtitle">精选商品，品质保证</p>
        </div>
        <!-- 模糊查寻，分类查找 -->
         <!--  -->
         <div class="filter-container">
            <!-- 搜索框 -->
            <div class="search-container">
                <div class="search-box">
                    <input 
                        type="text" 
                        v-model="searchQuery" 
                        placeholder="搜索商品名称或描述..." 
                        class="search-input"
                        @input="handleSearch"
                    />
                    <button class="search-btn" @click="clearSearch" v-if="searchQuery">
                        <span class="clear-icon">×</span>
                    </button>
                    <div class="search-icon">🔍</div>
                </div>
            </div>
            
            <!-- 分类选择器 -->
            <div class="category-container">
                <div class="category-tabs">
                    <button 
                        class="category-tab" 
                        :class="{ active: selectedCategory === 'all' }"
                        @click="selectCategory('all')"
                    >
                        全部
                    </button>
                    <button 
                        class="category-tab" 
                        v-for="category in categories" 
                        :key="category"
                        :class="{ active: selectedCategory === category }"
                        @click="selectCategory(category)"
                    >
                        {{ category }}
                    </button>
                </div>
            </div>
            
            <!-- 结果信息 -->
            <div class="filter-results-info" v-if="searchQuery || selectedCategory !== 'all'">
                <span class="results-count">
                    找到 {{displayMovies.length}} 个商品
                    <span v-if="selectedCategory !== 'all'" class="category-info">（{{selectedCategory}}分类）</span>
                </span>
            </div>
        </div>
         <!-- 有商品时显示商品网格 -->
        <div class="products-grid" v-if="displayMovies && displayMovies.length > 0">
            <div class="product-card" v-for="item in displayMovies" :key="item.id">
                <goods
                    :img="item.img"
                    :describe="item.describe"
                    :id="item.id"
                    :name="item.name"
                    :price="item.price"
                    :margin="item.margin"
                ></goods>
            </div>
        </div>
        <!-- 无商品时显示空状态 -->
        <div class="empty-products" v-else-if="!searchQuery">
            <div class="empty-icon">🛍️</div>
            <h3>暂无商品</h3>
            <p>商品正在准备中，敬请期待...</p>
        </div>
         <!-- 搜索无结果时显示空状态 -->
        <div class="empty-search" v-else>
            <div class="empty-icon">🔍</div>
            <h3>未找到相关商品</h3>
            <p>请尝试其他关键词或检查拼写</p>
            <button class="clear-search-btn" @click="clearSearch">清除搜索</button>
        </div>
    </div>
 </template>

 <script>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import goods from './goods.vue';

 export default{
    name:'official',
    components:{
        goods,
    }, 
    //使用methods获取商品数据
        methods:{
            // 1.数据获取方法
            mygetdata(){
                this.getdata('/system/goodtable/list','').then(response=>{
                    console.log(response.rows);
                    // 2.遍历后端返回的数据
                    const newProducts = [];
                    for (var index in response.rows) {
                        // 3.处理图片url
                        const imgUrl = 'http://localhost:8080/dev-api' + response.rows[index].img;
                        
                        // 4.映射数据库字段到前端数据结构
                        let newmovies = {
                            id: response.rows[index].id,
                            name: response.rows[index].title,
                            kind: response.rows[index].goodtype,
                            price: response.rows[index].price,
                            margin: response.rows[index].num,
                            describe: response.rows[index].mydescribe,
                            img: imgUrl
                        };
                        
                        // 5.添加到临时数组
                        newProducts.push(newmovies);
                    }
                    
                    // 6.通过Vuex mutation批量添加商品
                    if (newProducts.length > 0) {
                        this.$store.commit('addProducts', newProducts);
                        console.log("已添加", newProducts.length, "个商品到商品列表");
                    }
                })
            }
        },
        // 页面挂载时自动获取数据
		mounted() {//生命周期 - 挂载完成（可以访问DOM元素）
			this.mygetdata();
		},	
    setup(){
        const store = useStore();
        // 使用Vuex获取商品数据
        const Movies = computed(() => store.getters.allProducts);

         const searchQuery=ref('');// 搜索关键词
         const selectedCategory=ref('all'); // 选中的分类
        // 获取所有分类
        const categories=computed(()=>{
            const categorySet=new Set();
            Movies.value.forEach(item=>{
                if(item.kind){
                    categorySet.add(item.kind)
                }
            });
            return Array.from(categorySet).sort();
        });
        // 过滤后的商品列表（同时支持搜索和分类）
        const filteredMovies=computed(()=>{
            let filtered=Movies.value;

            // 分类过滤
            if(selectedCategory.value!=='all'){
                filtered=filtered.filter(item=>item.kind===selectedCategory.value)
            }
            // 搜索过滤
            if (searchQuery.value.trim()) {
                const query = searchQuery.value.toLowerCase().trim();
                filtered = filtered.filter(item => 
                    item.name.toLowerCase().includes(query) || 
                    item.describe.toLowerCase().includes(query)
                );
            }
            return filtered;
        });
        // 创建显示数据
        const displayMovies=computed(()=>{
            return filteredMovies.value;
        });
        // 实现用户交互函数
        // 处理搜索输入
        const handleSearch=()=>{
            // 搜索逻辑在v-model，computed中自动处理
        };
         // 清除搜索
         const clearSearch = () => {
            searchQuery.value = '';
        };
        // 选择分类
        const selectCategory = (category) => {
            selectedCategory.value = category;
        };
        return{
            Movies,
            searchQuery,
            selectedCategory,
            categories,
            filteredMovies,
            displayMovies,
            handleSearch,
            clearSearch,
            selectCategory,
        }
    }
 }
</script>

<style scoped>
.official {
    padding: 20px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
    font-weight: 300;
}

/* 过滤容器 */
.filter-container {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

/* 搜索容器 */
.search-container {
    margin-bottom: 30px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.search-input {
    flex: 1;
    padding: 15px 50px 15px 20px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
}

.search-input::placeholder {
    color: #999;
    font-weight: 400;
}

.search-icon {
    position: absolute;
    right: 15px;
    font-size: 18px;
    color: #667eea;
    pointer-events: none;
}

.search-btn {
    position: absolute;
    right: 15px;
    width: 30px;
    height: 30px;
    border: none;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.search-btn:hover {
    background: #ff5252;
    transform: scale(1.1);
}

.clear-icon {
    line-height: 1;
}

.search-results-info {
    text-align: center;
    margin-top: 15px;
    color: #666;
    font-size: 14px;
}

.results-count {
    background: #f8f9fa;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
}

/* 分类容器 */
.category-container {
    margin-bottom: 20px;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.category-tab {
    padding: 10px 20px;
    border: 2px solid #e1e8ed;
    background: white;
    color: #666;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-tab:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.category-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.category-tab.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 过滤结果信息 */
.filter-results-info {
    text-align: center;
    margin-top: 15px;
    color: #666;
    font-size: 14px;
}

.category-info {
    color: #667eea;
    font-weight: 600;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.product-card {
    display: flex;
    justify-content: center;
}

.empty-products {
    text-align: center;
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.empty-products h3 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.empty-products p {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* 搜索无结果状态 */
.empty-search {
    text-align: center;
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

.empty-search h3 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.empty-search p {
    font-size: 1rem;
    color: #666;
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.clear-search-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.clear-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .filter-container {
        padding: 0 15px;
    }
    
    .search-container {
        margin-bottom: 25px;
    }
    
    .search-input {
        padding: 12px 45px 12px 15px;
        font-size: 14px;
    }
    
    .search-icon {
        right: 12px;
        font-size: 16px;
    }
    
    .search-btn {
        right: 12px;
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
    
    .category-tabs {
        padding: 12px;
        gap: 8px;
    }
    
    .category-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px 0;
    }
    
    .empty-products, .empty-search {
        padding: 40px 20px;
        margin: 0 10px;
    }
    
    .empty-icon {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .filter-container {
        padding: 0 10px;
    }
    
    .search-input {
        padding: 10px 40px 10px 12px;
        font-size: 13px;
    }
    
    .search-icon {
        right: 10px;
        font-size: 14px;
    }
    
    .search-btn {
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .category-tabs {
        padding: 10px;
        gap: 6px;
    }
    
    .category-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .empty-products, .empty-search {
        padding: 30px 15px;
    }
}
</style>


